extends layout
block content
    .text-center
        h1.landing-heading Learn to code and help nonprofits.
        .spacer
        .row
            .big-break
            .big-break
            .big-break
            .col-xs-12.col-sm-12.col-md-3
                img.img-responsive.landing-icon.img-center(src= 'https://s3.amazonaws.com/freecodecamp/landingIcons_connect.svg', alt='Get great references and connections to start your software engineer career')
                p.large-p Join a community of 200,000+ developers.
            .col-xs-12.col-sm-12.col-md-3
                img.img-responsive.landing-icon.img-center(src= 'https://s3.amazonaws.com/freecodecamp/landingIcons_learn.svg', alt='Learn to code and learn full stack JavaScript')
                p.large-p Work on coding challenges together.
            .col-xs-12.col-sm-12.col-md-3
                img.img-responsive.landing-icon.img-center(src= 'https://s3.amazonaws.com/freecodecamp/landingIcons_portfolio.svg', alt='Build a portfolio of apps for nonprofits')
                p.large-p Build a portfolio of apps that solve real problems.
            .col-xs-12.col-sm-12.col-md-3
                img.img-responsive.landing-icon.img-center(src= 'https://s3.amazonaws.com/freecodecamp/landingIcons_nonprofits.svg', alt='Empower nonprofits with code')
                p.large-p Empower nonprofits with code.
        .big-break
        .big-break
        .big-break
        .big-break
        .row
            .col-xs-12.col-sm-8.col-sm-offset-2
                a.btn.btn-cta.signup-btn.btn-block(href="/signin") Start coding (it's free)
                .button-spacer
                a.btn.btn-lg.btn-primary.btn-primary-ghost.btn-block(href="/nonprofits") My nonprofit needs coding help
        .spacer
        h2 As featured in:
        img.img-center.img-responsive(src='https://s3.amazonaws.com/freecodecamp/as-seen-on.png')
        .spacer
        hr
        .spacer
        h2 Launch your career as a software engineer:
        .spacer
        .row
            .col-xs-12.col-sm-12.col-md-4
                img.img-responsive.testimonial-image.img-center(src="//i.imgur.com/nsvNixW.jpg", alt="Meta's testimonial image")
                p.testimonial-copy Through Free Code Camp, I built a robust and highly functional web app for a nonprofit. This led me to getting a fantastic job.
                h3 - Meta Hirschl
            .col-xs-12.col-sm-12.col-md-4
                img.img-responsive.testimonial-image.img-center(src="//i.imgur.com/QPpjPac.jpg", alt="Brian's testimonial image")
                p.testimonial-copy Free Code Camp's a great way for disabled veterans like me to retrain. I'm receiving engineering job offers, and I haven't even finished yet.
                h3 - Brian Grant
            .col-xs-12.col-sm-12.col-md-4
                img.img-responsive.testimonial-image.img-center(src="//i.imgur.com/wjlDigg.jpg", alt="Maxim Orlov's testimonial image")
                p.testimonial-copy I started Free Code Camp with zero knowledge of web development. 6 months later, I landed my first job as a back end engineer.
                h3 - Maxim Orlov
        .spacer
        .row
            .col-xs-12.col-sm-8.col-sm-offset-2
                a.btn.btn-lg.btn-primary.btn-primary-ghost.btn-block(href='/stories') Hear from more of our campers
        .spacer
        .spacer
        hr
        .spacer
        h2 Skills you'll learn:
        .spacer
        .row
            .text-center.negative-35
                .col-xs-12.col-sm-12.col-md-3
                    .landing-skill-icon.ion-social-html5
                    h2.black-text HTML5
                .col-xs-12.col-sm-12.col-md-3
                    .landing-skill-icon.ion-social-css3
                    h2.black-text CSS3
                .col-xs-12.col-sm-12.col-md-3
                    .landing-skill-icon.ion-social-javascript
                    h2.black-text JavaScript
                .col-xs-12.col-sm-12.col-md-3
                    .landing-skill-icon.fa.fa-database.font-awesome-padding
                    h2.black-text Databases
                .col-xs-12.col-sm-12.col-md-3
                    .landing-skill-icon.ion-social-github
                    h2.black-text Git & GitHub
                .col-xs-12.col-sm-12.col-md-3
                    .landing-skill-icon.ion-social-nodejs
                    h2.black-text Node.js
                .col-xs-12.col-sm-12.col-md-3
                    .landing-skill-icon.custom-landing-skill-icon
                        img(src='https://s3.amazonaws.com/freecodecamp/react.svg')
                    h2.black-text React.js
                .col-xs-12.col-sm-12.col-md-3
                    .landing-skill-icon.custom-landing-skill-icon
                        img(src='https://s3.amazonaws.com/freecodecamp/d3-logo.svg')
                    h2.black-text D3.js
        .spacer
        hr
        .spacer
        .col-xs-offset-0.col-sm-offset-1.text-left.large-p
            h2 Here's why you should join our open source community right now:
            .spacer
            ul.large-li
                li.ion-code &thinsp; You'll get help in real time from our community chat rooms.
                li.ion-code &thinsp; You'll meet up with other coders in your city.
                li.ion-code &thinsp; You'll learn to code at your own pace, in your browser or on your phone.
                li.ion-code &thinsp; You'll work through our focused, interactive courses and tutorials.
                li.ion-code &thinsp; You'll learn state-of-the-art full stack JavaScript technologies.
                li.ion-code &thinsp; You'll build projects that help nonprofits carry out their missions more effectively.
                li.ion-code &thinsp; You'll assemble a portfolio of real apps used by real people.
        .big-break
        .row
            .col-xs-12.col-sm-8.col-sm-offset-2
                a.btn.btn-cta.signup-btn.btn-block(href="/signin") Start coding (it's free)
        script.
            challengeName = 'Home'
